<template>
	<view>
	    <u-count-down
	            :time="time"
	            format="HH:mm:ss"
	            autoStart
	            millisecond
	            @change="onChange"
	    >
	        <view class="time">
	            <view class="time__custom">
	                <text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时</text>
	            </view>
	            <text class="time__doc">:</text>
	            <view class="time__custom">
	                <text class="time__custom__item">{{ timeData.minutes }}分</text>
	            </view>
	            <text class="time__doc">:</text>
	            <view class="time__custom">
	                <text class="time__custom__item">{{ timeData.seconds }}秒</text>
	            </view>
				
	        </view>
	    </u-count-down>
	</view>
</template>

<script>
    import {
    	mapState,
    	mapMutations
    } from 'vuex';
	export default {
		props: {
			timepoint:0,  //时间截点
			minute:0      //限定的倒计时数
		},
		data() {
			return {
				time:0,
				timeData:{}
			};
		},
		created(){
			var aaa = new Date().getTime()
			var bbb = this.timepoint*1000
			this.time=this.minute-(aaa-bbb)
		},
		methods:{
			onChange(e) {
                this.timeData = e
            },
	}
}
</script>

<style lang="scss">

.time {
    @include flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	align-content: center;
	

    &__custom {
         width: 36px;
         height: 22px;
         background-color: $u-primary;
         border-radius: 4px;
         /* #ifndef APP-NVUE */
         display: flex;
         /* #endif */
         justify-content: center;
         align-items: center;
    
        &__item {
             color: #fff;
             font-size: 12px;
             text-align: center;
         }
    }
    
    &__doc {
         color: $u-primary;
         padding: 0px 4px;
     }
    
    &__item {
         color: #606266;
         font-size: 15px;
         margin-right: 4px;
     }
}

</style>
